import React, { Component } from "react";
import { Menu, Icon, message } from "antd";
import router from "umi/router";
import { connect } from "dva";
import IconFont from "../IconFont/IconFont";
import "./index.less";
import { getCityList } from "../../services/services";

const SubMenu = Menu.SubMenu;

@connect(({ add }) => ({ add: add }))
class LeftMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      defaultOpenKeys: ["/Region", "/Check", "/City", "/Provincial"],
      openKeys: ["/Region"],
      // rootSubmenuKeys: ["/Region", "/Check", "/City", "/Provincial"],
      menuList: [],
      BreadcrumbList: [],
      menuLists: {}
    };
  }
  componentDidMount() {
    this.getCityChildrenList();
  }
  // 获取menu菜单列表
  getCityChildrenList = () => {
    getCityList()
      .then(res => {
        if (res.code === 200) {
          this.setState({
            menuList: res.data[0].children,
            menuLists: res.data[0]
          });
        } else if (res.code === 403) {
          message.error("未获取到授权参数,请刷新页面重新登录!");
          router.push("/403");
        }
      })
      .catch(err => {
        console.log(err);
      });
  };
  // 动态生成菜单项
  renderMenuItem = data =>
    data.map(item => {
      if (item.children) {
        return (
          <SubMenu
            key={`/City/DistrictContent/${item.id}`}
            title={
              <span>
                <IconFont type="icon-dingwei" />
                <span>{item.title}</span>
              </span>
            }
          >
            {item.children.map(_item => {
              if (_item.children) {
                return this.renderMenuItem([_item]);
              } else {
                return (
                  <Menu.Item
                    key={`/City/DistrictContent/${_item.id}`}
                    onClick={() => {
                      this.goToPage(`/City/DistrictContent/${_item.id}`, ["青海省", item.title, _item.title]);
                    }}
                  >
                    {_item.title}
                  </Menu.Item>
                );
              }
            })}
          </SubMenu>
        );
      }
      return (
        <Menu.Item
          key={`/City/DistrictContent/${item.id}`}
          onClick={() => {
            this.goToPage(`/City/DistrictContent/${item.id}`, ["青海省", item.title]);
          }}
        >
          <IconFont type="icon-dingwei" />
          {item.title}
        </Menu.Item>
      );
    });
  // // 只打开当前父级菜单
  // onOpenChange = openKeys => {
  //   const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
  //   if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  //     this.setState({ openKeys });
  //   } else {
  //     this.setState({
  //       openKeys: latestOpenKey ? [latestOpenKey] : []
  //     });
  //   }
  // };
  goToPage = (path, item = []) => {
    this.props.dispatch({ type: "add/save", payload: { BreadcrumbList: item } });
    sessionStorage.setItem("BreadcrumbList", JSON.stringify(item));
    router.push({
      pathname: path,
      quary: item
    });
  };

  render() {
    let selectedKeys = [this.props.location.pathname];
    let quanxian = this.props.add.rightList ? this.props.add.rightList : [];
    return (
      <Menu
        mode="inline"
        defaultSelectedKeys={["/Region/DraftList"]}
        defaultOpenKeys={this.state.defaultOpenKeys}
        // onOpenChange={this.onOpenChange}
        // openKeys={this.state.openKeys}
        selectedKeys={selectedKeys}
        style={{
          overflowY: "auto",
          overflowX: "hidden",
          width: 220,
          height: "100vh",
          position: "fixed",
          left: 0
        }}
      >
        {quanxian.indexOf("/supervise/province/draftList") > -1 || quanxian.indexOf("/supervise/province/pushed") > -1 || quanxian.indexOf("/supervise/province/deleted") > -1 ? (
          <SubMenu
            key="/Region"
            title={
              <span>
                <IconFont type="icon-zixun" />
                <span>分发</span>
              </span>
            }
          >
            {quanxian.indexOf("/supervise/province/draftList") > -1 ? (
              <Menu.Item
                key="/Region/DraftList"
                onClick={() => {
                  this.goToPage("/Region/DraftList", ["省级分发", "稿件列表"]);
                }}
              >
                稿件列表
              </Menu.Item>
            ) : null}

            {quanxian.indexOf("/supervise/province/pushed") > -1 && quanxian.indexOf("/supervise/province/draftList") > -1 ? (
              <Menu.Item
                key="/Region/PushedR"
                onClick={() => {
                  this.goToPage("/Region/PushedR", ["省级分发", "已推送"]);
                }}
              >
                已推送
              </Menu.Item>
            ) : null}
            {quanxian.indexOf("/supervise/province/draftList") < 0 ? (
              <Menu.Item
                key="/Region/PushedR"
                onClick={() => {
                  this.goToPage("/Region/PushedR", ["省级分发", "已接收"]);
                }}
              >
                已接收
              </Menu.Item>
            ) : null}
            {quanxian.indexOf("/supervise/province/deleted") > -1 ? (
              <Menu.Item
                key="/Region/DeletedR"
                onClick={() => {
                  this.goToPage("/Region/DeletedR", ["省级分发", "已删除"]);
                }}
              >
                已删除
              </Menu.Item>
            ) : null}
          </SubMenu>
        ) : null}
        {quanxian.indexOf("/supervise/check/pushDraft") > -1 || quanxian.indexOf("/supervise/check/deleteDraft") > -1 || quanxian.indexOf("/supervise/check/releaseDraft") > -1 ? (
          <SubMenu
            key="/Check"
            title={
              <span>
                <IconFont type="icon-renzheng" />
                <span>审核</span>
              </span>
            }
          >
            {quanxian.indexOf("/supervise/check/pushDraft") > -1 ? (
              <Menu.Item
                key="/Check/PushDraft"
                onClick={() => {
                  this.goToPage("/Check/PushDraft", ["审核", "推稿待审核"]);
                }}
              >
                推稿待审核
              </Menu.Item>
            ) : null}

            {quanxian.indexOf("/supervise/check/deleteDraft") > -1 ? (
              <Menu.Item
                key="/Check/DeleteDraft"
                onClick={() => {
                  this.goToPage("/Check/DeleteDraft", ["审核", "删除待审核"]);
                }}
              >
                删除待审核
              </Menu.Item>
            ) : null}

            {quanxian.indexOf("/supervise/check/releaseDraft") > -1 ? (
              <Menu.Item
                key="/Check/ReleaseDraft"
                onClick={() => {
                  this.goToPage("/Check/ReleaseDraft", ["审核", "发稿待审核"]);
                }}
              >
                发稿待审核
              </Menu.Item>
            ) : null}
          </SubMenu>
        ) : null}

        {/* {quanxian.indexOf("/supervise/city/pushed") > -1 || quanxian.indexOf("/supervise/city/deleted") > -1 ? (
          <SubMenu
            key="/Provincial"
            title={
              <span>
                <IconFont type="icon-zixun" />
                <span>市级分发</span>
              </span>
            }
          >
            {quanxian.indexOf("/supervise/city/draftList") > -1 ? (
              <Menu.Item
                key="/Provincial/DraftList"
                onClick={() => {
                  this.goToPage("/Provincial/DraftList", ["市级分发", "稿件列表"]);
                }}
              >
                稿件列表
              </Menu.Item>
            ) : null}
            {quanxian.indexOf("/supervise/city/pushed") > -1 && quanxian.indexOf("/supervise/city/draftList") > -1 ? (
              <Menu.Item
                key="/Provincial/PushedP"
                onClick={() => {
                  this.goToPage("/Provincial/PushedP", ["市级分发", "已推送"]);
                }}
              >
                已推送
              </Menu.Item>
            ) : null}
            {quanxian.indexOf("/supervise/city/pushed") > -1 && quanxian.indexOf("/supervise/city/draftList") < 0 ? (
              <Menu.Item
                key="/Provincial/PushedP"
                onClick={() => {
                  this.goToPage("/Provincial/PushedP", ["市级分发", "已接收"]);
                }}
              >
                已接收
              </Menu.Item>
            ) : null}
            {quanxian.indexOf("/supervise/city/deleted") > -1 ? (
              <Menu.Item
                key="/Provincial/DeletedP"
                onClick={() => {
                  this.goToPage("/Provincial/DeletedP", ["市级分发", "已删除"]);
                }}
              >
                已删除
              </Menu.Item>
            ) : null}
          </SubMenu>
        ) : null} */}
        {quanxian.indexOf("/supervise/city/deleted") > -1 || quanxian.indexOf("/supervise/province/deleted") > -1 ? (
          <SubMenu
            key="/City"
            title={
              <span>
                <IconFont type="icon-caidan" />
                <span>{this.state.menuLists.title}</span>
              </span>
            }
          >
            <Menu.Item
              key="/city/NewestDraft"
              onClick={() => {
                this.goToPage("/city/NewestDraft", ["最新稿件"]);
              }}
            >
              <Icon type="alert" />
              最新稿件
            </Menu.Item>
            <Menu.Item
              key="/city/RecentLive"
              onClick={() => {
                this.goToPage("/city/RecentLive", ["最近直播"]);
              }}
            >
              <Icon type="video-camera" />
              最近直播
            </Menu.Item>
            <Menu.Item
              key="/city/FeedLibrary"
              onClick={() => {
                this.goToPage("/city/FeedLibrary", ["供稿资源库"]);
              }}
            >
              <Icon type="switcher" />
              供稿资源库
            </Menu.Item>
            {this.renderMenuItem(this.state.menuList)}
          </SubMenu>
        ) : null}
      </Menu>
    );
  }
}
export default LeftMenu;
